<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">Delete Zonegroup</ng-container>

  <ng-container class="modal-content">
    <form name="zonegroupForm"
          [formGroup]="zonegroupForm"
          novalidate>
      <div class="modal-body ms-4 mt-4">
        <label i18n>
            Are you sure that you want to delete the selected zonegroup and its zones?</label>
        <label i18n>
            This will delete the following zones and pools and any data stored in these pools:</label>
        <ng-container *ngIf="zonegroupData$ | async as data">
          <strong class="mt-3 mb-2 h5">Zones:</strong>
          <div id="scroll">
            <strong *ngFor="let zone of data.zones">{{zone?.name}}</strong>
          </div>
          <strong class="mt-3 mb-2 h5">Pools:</strong>
          <div id="scroll"
               class="mb-2">
            <ng-container *ngFor="let pool of data.placement_targets">
              <strong *ngIf="pool.name !== 'default-placement'">{{pool?.name}}</strong>
            </ng-container>
          </div>
        </ng-container>
        <div class="form-group">
          <div class="custom-control custom-checkbox mt-2">
            <input type="checkbox"
                   class="custom-control-input"
                   name="deletePools"
                   id="deletePools"
                   formControlName="deletePools"
                   (change)="showDangerText()">
            <label class="custom-control-label"
                   for="deletePools"
                   i18n>Yes, I want to delete the zones and their pools.</label>
          </div>
          <div *ngIf="displayText"
               class="me-4">
            <cd-alert-panel type="danger"
                            i18n>
                            This will delete all the data in the pools!
            </cd-alert-panel>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="submit()"
                              [form]="zonegroupForm"
                              [submitText]="actionLabels.DELETE ">
        </cd-form-button-panel>
      </div>
    </form>
  </ng-container>

</cd-modal>
